/* Variables & Helpers */
@import url("chrome://komodo/skin/_config/window.less");
@import url("chrome://komodo/skin/_config/modules.less");
@import url("chrome://komodo/skin/_config/tabs.less");

@import url("chrome://komodo/skin/plat/shared/icons_depend.less");

/* Addons Page */
page#addons-page,
page#addons-page .main-content,
page#addons-page .view-header
{
    background: @window-background;
    color: @window-color;
}

page#addons-page
{
    .addon,
    #search-filter,
    .view-header
    {
        border-top: 0;
        border-bottom: @main-border;
    }

    #view-port-container
    {
        border: @main-border;
    }

    #categories
    {
        border: @main-border;
        border-right: 0;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    
    .addon, .name-container
    {
        color: @list-listbox-item-color;
    }

    .category
    {
        color: @list-listbox-item-color;
        background: @list-listbox-row-background;

        &[selected="true"]
        {
            color: @list-listbox-item-color-selected;
            background: @list-listbox-row-background-selected;
            border: none;
        }

        &[selected="true"]:focus
        {
            color: @list-listbox-item-color-focus;
            background: @list-listbox-row-background-focus;
            border: none;
        }

    }
    
    #header-search, #header-search:hover, #header-search[focused]
    {
        -moz-appearance: @textbox-appearance !important;
        background-color: @textbox-background !important;
        color: @textbox-color !important;
        box-shadow: @textbox-box-shadow !important;
        border: @textbox-border !important;
        border-radius: @textbox-border-radius !important;
    }
    
    .header-button
    {
        -moz-appearance: @button-appearance;
        background: @button-background;
        color: @button-color;
        border: @button-border;
        text-shadow: @button-text-shadow;
        border-radius: @button-border-radius;
        
        &:hover
        {
            background: @button-background-hover !important;
            color: @button-color-hover !important;
            border: @button-border-hover !important;
            text-shadow: @button-text-shadow-hover !important;
        }
    }
    
}

/* Account Setup Wizard */

wizard#accountSetup
{
    background: @window-background;
    color: @window-color;
}

#debuggerPanel > hbox.toolbar-background
{
    padding: 4px;
}

#DebuggerPanelContent #viewer-splitter
{
    -moz-appearance: none;
    position: relative;
    z-index: 100;
    width: 4px;
    min-width: 4px;
    margin-right: -4px;

    background: transparent;
    border-left: @main-border;

    grippy
    {
        background-image: none;
    }
}

/* Debug Output Tabs */

#DebuggerPanelContent tabbox
{
    -moz-appearance: none;

    tabs
    {
        height: 25px;
        padding: 0px;
        margin: 0px;
        -moz-appearance: none;
        border: none;

        .tabstrip-box
        {
            margin-top: 0;
            padding-left: 2px;
            padding-right: 2px;
            border: none;
            border-top: @main-border;
            background: @tab-debug-box-background;
        }
    }

    tab
    {
        -moz-appearance: none;
        -moz-transition: @tab-transition;
        height: 18px !important;
        max-height: 18px;
        max-width: 20em;
        margin: 2px;
        padding: 0;

        background: @tab-debug-background;
        .border(@tab-debug-border-width,@tab-debug-border-style,@tab-debug-border-color);
        border-radius: @tab-debug-border-radius;
        font-weight: @tab-debug-font-weight;
        color: @tab-debug-color;
        text-shadow: @tab-debug-text-shadow;
        box-shadow: @tab-debug-box-shadow;

        -moz-border-top-colors: none;
        -moz-border-right-colors: none;
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;

        &:hover
        {
            background: @tab-debug-hover-background;
            .border(@tab-debug-hover-border-width,@tab-debug-hover-border-style,@tab-debug-hover-border-color);
            border-radius: @tab-debug-hover-border-radius;
            font-weight: @tab-debug-hover-font-weight;
            color: @tab-debug-hover-color;
            text-shadow: @tab-debug-hover-text-shadow;
            box-shadow: @tab-debug-hover-box-shadow;
        }

        &[selected="true"]
        {
            background: @tab-debug-selected-background;
            .border(@tab-debug-selected-border-width,@tab-debug-selected-border-style,@tab-debug-selected-border-color);
            border-radius: @tab-debug-selected-border-radius;
            font-weight: @tab-debug-selected-font-weight;
            color: @tab-debug-selected-color;
            text-shadow: @tab-debug-selected-text-shadow;
            box-shadow: @tab-debug-selected-box-shadow;
        }

        & > hbox
        {
            -moz-appearance: none;
            padding: 0;
        }

    }

    tabpanels
    {
        -moz-appearance: none;
        border: none;
        padding: 0px;
        margin: 0px;
    }

    tabpanels > tabpanel
    {
        padding: 0px;
        margin: 0px;
    }

    view
    {
        border: none;
        margin: 0px;
        padding: 0px;
    }
}

#callstack-listbox
{
    -moz-appearance: none;
}

.panel-label,
#collab-sessions-label,
#collab-friends-label,
#placesRootButton,
#placesSubpanelSplitterProjectLabel
{
    color: @panel-label-color;
    font-weight: @panel-label-weight;
    text-transform: @panel-label-transform;
    text-shadow: @panel-label-shadow;
    font-family: @panel-label-font;
    
    menupopup
    {
        text-transform: none;
        text-shadow: none;
        font-weight: normal;
    }
}

#notificationWidget
{
    #toolbar
    {
        border-right: 0px;
    }

    #message-container
    {
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        border-left: 0px !important;
        border-right: 0px !important;

        notification
        {
            padding-left: 4px;
            padding-right: 4px;
        }

        &[focused]
        {
            border: 0;
            border-top: 1px;
            border-bottom: 1px;
            border-style: dotted;
            border-color: grey;
        }
    }
}

/* Breadcrumbs */

#breadcrumbBar
{

    .breadcrumb
    {
        .breadcrumb-arrow
        {
            background-image: @icon-breadcrumb-arrow;
        }

    }

    .breadcrumb-file-icon
    {
        list-style-image: @icon-breadcrumb-file;
    }

    .breadcrumb-folder-icon:not(.project-folder)
    {
        list-style-image: @icon-breadcrumb-folder;
    }

    .breadcrumb-folder-icon.project-folder
    {
        list-style-image: @icon-breadcrumb-project;
    }

}

/* Browser Preview */

toolbar#nav-bar
{
    border: 0;
}

/* Quick Launch */

vbox[anonid="quickstart"]
{
    border: 0 !important;
    border-radius: 0 !important;
    
    .inner > button
    {
        width: 250px;
        padding: 6px 4px !important;
        margin: 2px 0 1px;

        label
        {
            text-align: left;
        }
    }
    
    .footer > button
    {
        padding: 2px 4px !important;
        margin: 2px 4px;
    }
    
    image.button-icon
    {
        display: block;
        margin-right: 6px;
    }
    
    .footer
    {
        padding: 4px 6px;
        
        image.button-icon
        {
            max-width: 12px;
            max-height: 12px;
        }
    }

}

/* Run Output Pane */

#runoutput-command .textbox-search-icons
{
    visibility: collapse;
}

/* Statusbar Notifications */
#statusbar-notifications-wrap label
{
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 4px;
    font-weight: bold;
}

#statusbar-notif-info
{
    color: rgb(81, 79, 117);
}

#statusbar-notif-warning
{
    color: rgb(107, 94, 56);
}

#statusbar-notif-error
{
    color: rgb(114, 78, 78);
}
